<template>
	<!-- 详细内容 -->
	<view class="notice-list">
		<div style="padding: 15px 10px;">
			<view v-for="notice in notices" :key="notice.id" class="notice-item">
				<div class="notice-title">{{ notice.title }}</div>
				<div class="notice-date">{{ notice.date }} <text style="margin-left: 6px;">{{ notice.type }}</text>
				</div>
				<!-- <div>
					<text class="notice-content">{{ notice.content }}</text>
				</div>
				<image :src="notice.image" class="notice-image"></image> -->
				<view v-if="!isEditActive" v-for="(item, index) in items" :key="index" class="item">
					<text v-if="item.type === 'text'" class="text">{{ item.value }}</text>
					<image v-if="item.type === 'image'" :src="item.src" mode="widthFix" class="image" />
				</view>
			</view>
		</div>
		<div class="footer">
			<div class="footer_div" :class="{'isActivities': isActivities === false}" @click="addToFavorites">
				{{ isActivities ? '☆' : '★' }} 加入收藏
			</div>
			<div class="footer_div" @click="shareToggle">📤 分享</div>
		</div>

		<view>
			<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
				<uni-popup-share></uni-popup-share>
			</uni-popup>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		showstatebyid,
		addActivities,
		getisActivities,
		delActivities
	} from '@/request/api.js';
	import {
		getdate
	} from '@/request/wx.js';

	const notices = ref([]);
	const share = ref(null);
	const isActivities = ref(true);
	const token = ref('');
	const u = ref(null);
	const items = ref([]);

	const getToken = () => {
		const storedToken = uni.getStorageSync('token');
		token.value = storedToken;
	};

	let id; // 定义一个变量来存储id
	let type;
	onLoad(async (e) => {
		console.log("e", e);
		id = e.id;
		type = e.type;
		getToken();
		try {
			const req = await showstatebyid({
				id: id
			});
			console.log(req);
			console.log(req.data.data[0].minute);
			// 将多个 JSON 字符串合并为一个有效的 JSON 数组字符串
			let combinedJsonString = '[' + req.data.data[0].minute.replace(/}{/g, '},{') + ']';
			// 解析合并后的 JSON 数组字符串
			let retrievedArray = JSON.parse(combinedJsonString);
			items.value = retrievedArray;
			const data = req.data.data.map(item => ({
				id: item.id,
				image: item.cover,
				type: item.classify,
				title: item.title,
				// content: item.introduce,
				date: getdate(item.date)
			}));
			notices.value = data;
			if (token.value) {
				let i = 0;
				addActivitiesForFirstNotice(i);
				u.value.status = 1;
				// console.log(u.value);
				getisActivities(u.value).then((res) => { //默认显示是否收藏
					if (res.data.code === 200) {
						console.log('已收藏');
						isActivities.value = false;
					} else {
						console.log('未收藏');
						isActivities.value = true;
					}
				});
			} else {
				console.log("未登录");
			}
		} catch (error) {
			console.error("请求失败:", error);
		}
	});

	const addActivitiesForFirstNotice = (i) => {
		u.value = {
			'uid': token.value,
			'jzidorid': notices.value[0].id,
			'type': type,
			'title': notices.value[0].title,
			'status': i
		};
		// console.log(u.value);
		addActivities(u.value).then((res) => { //添加到我的历史记录
			// console.log(res);
			if (res.data.code === 200) {
				console.log('添加成功');
			} else {
				console.log('已存在并修改');
			}
		});

	};

	const addToFavorites = () => { // 加入收藏的逻辑
		let i = 1;
		if (token.value) {
			if (isActivities.value === true) { //加入收藏
				// console.log('加入收藏');
				addActivitiesForFirstNotice(i);
				isActivities.value = false;
			} else {
				// console.log('取消收藏');
				u.value.status = i;
				// console.log(u.value);
				delActivities(u.value).then((res) => { //取消收藏
					if (res.data.code === 200) {
						// console.log('删除成功');
						isActivities.value = true;
					} else {
						// console.log('删除失败');
						isActivities.value = false;
					}
				});
			}
		} else {
			console.log("未登录");
		}
	};

	const shareToggle = () => { // 分享的逻辑
		share.value.open();
	};
</script>

<style scoped>
	.image {
		width: 100%;
	}

	/* .text {
		padding: 10px;
	} */

	.item {
		padding-bottom: 30px;
		position: relative;
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 140rpx;
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		/* padding: 10px 0; */
		box-shadow: 0 -1px 5px rgba(85, 0, 0, 0.1);
	}

	.footer_div {
		flex: 1;
		background-color: #efefef;
		transition: background-color 0.3s;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.footer_div.isActivities {
		color: #b472fd;
	}

	.footer_div:first-child {
		background-color: #efefef;
		border-right: solid 1px gray;
	}

	.set_inupt {
		height: 68rpx;
		width: 94%;
		padding-left: 20px;
		border-radius: 16rpx;
		background-color: #efefef;
	}

	.notice-list {
		display: flex;
		flex-direction: column;
		width: 100%;
		min-height: 100vh;
		background-color: #efefef;
	}

	.notice-item {
		margin-bottom: 100px;
		/* margin-bottom: 20rpx; */
		/* height: 190px; */
		border-radius: 22rpx;
		background-color: white;
		padding: 0px 20px;
	}

	.notice-image {
		margin: 10px 0px;
		border-radius: 4px;
	}

	.notice-title {
		padding: 20px 0px;
		font-weight: bold;
		font-size: 21px;
	}

	.notice-content {
		font-size: 15px;
	}

	.notice-date {
		color: #999;
		font-size: 14px;
		padding-bottom: 20px;
	}
</style>